<template>
  <div>
    <section class="blog-page">
      <div id="search-field" class="sidebar-div">
        <div class="input-group">
          <input
            type="text"
            class="form-control"
            placeholder="搜索内容"
            aria-label="Search"
            aria-describedby="search-field"
            @keypress.enter="toSearch"
            v-model="searchInfo"
          />
          <div class="input-group-append">
            <i class="lni-search" aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchInfo:"",
    };
  },
  created() {},
  mounted() {},
  methods: {
    toSearch(){
      this.$emit('toSearch',this.searchInfo);
      this.searchInfo='';
    }
  },
};
</script>

<style>
#search-field .form-control {
  position: relative;
  border-radius: 10px !important;
}
#search-field .form-control:focus {
    	box-shadow: 0px 0px 0px 1px #dde;
}
#search-field .input-group {
  position: relative;
}
#search-field .input-group-append {
  position: absolute;
  right: 10px;
  top: calc(0.75em + 0.325rem + 2px);
  z-index: 100;
}
</style>
